﻿
@{
    ViewBag.Title = "Other";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="~/Template/ace_admin_v1.4.0/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
<script src="~/Template/ace_admin_v1.4.0/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script src="~/Template/ace_admin_v1.4.0/components/moment/moment.js"></script>
<div id="app" class="row">
    <div class="col-lg-12">
        <div class="row" id="list">
            <div class="col-lg-12">
                <p>
                    <button class="btn btn-white btn-info btn-bold" v-on:click="p_OpenModal">
                        <i class="ace-icon glyphicon glyphicon-plus bigger-120 blue"></i>
                        新增工作计划
                    </button>
                </p>
                <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="center">
                                名称
                            </th>
                            <th>创建时间</th>
                            <th>所属时间</th>
                            <th>状态</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="tr in khblst">
                            <td class="center">
                                {{tr.mkhbmc}}
                            </td>
                            <td>
                                {{tr.cjsjstr}}
                            </td>
                            <td>
                                {{tr.sssjstr}}
                            </td>
                            <td>
                                <template v-if="tr.khbzt==1">
                                    创建完成
                                </template>
                                <template v-if="tr.khbzt==2">
                                    编辑中
                                </template>
                                <template v-if="tr.khbzt==3">
                                    提交审核
                                </template>
                                <template v-if="tr.khbzt==4">
                                    通过审核
                                </template>
                            </td>
                            <td>

                                <div class="btn-group" v-if="tr.khbzt==2||tr.khbzt==1">
                                    <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm">
                                        操作
                                        <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                    </button>

                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#" v-on:click="p_Edit(tr)">编辑</a>
                                        </li>
                                        <li>
                                            <a href="#" v-on:click="p_TiJiaoShenHe(tr.mkhbid)">提交</a>
                                        </li>
                                        <li>
                                            <a href="#" v-on:click="p_Del(tr.mkhbid)">删除</a>
                                        </li>
                                    </ul>
                                </div><!-- /.btn-group -->
                            </td>

                        </tr>

                    </tbody>
                </table>
            </div>
        </div>

        <div class="row" id="info" style="display: none">
            <div class="col-xs-12  widget-container-col">
                <!-- #section:custom/widget-box -->
                <div class="widget-box">
                    <div class="widget-header">
                        <h5 class="widget-title">编辑区</h5>

                        <!-- #section:custom/widget-box.toolbar -->
                        <div class="widget-toolbar">
                            <div class="widget-menu">
                                <a href="#" data-action="settings" data-toggle="dropdown">
                                    <i class="ace-icon fa fa-bars"></i>
                                </a>

                                <ul class="dropdown-menu dropdown-menu-right dropdown-light-blue dropdown-caret dropdown-closer">
                                    <li>
                                        <a data-toggle="tab" href="#dropdown1" v-on:click="ShowList()">返回列表</a>
                                    </li>

                                </ul>
                            </div>


                        </div>

                        <!-- /section:custom/widget-box.toolbar -->
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">
                            <div class="form-horizontal" role="form">
                                <div class="row">
                                    <div class="col-xs-5">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                工作计划名称：
                                            </span>
                                            <input type="text" class="form-control search-query" placeholder="工作计划名称" readonly="readonly" v-bind:value="khbinfo.mkhbmc" />

                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <table class="table  table-bordered table-hover">
                                        <thead class="thin-border-bottom">
                                            <tr>
                                                <th>
                                                    名称
                                                </th>
                                                <th>分值</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <template v-for="tr in khbinfo.MyKaoHeBiaoOnes">
                                                <tr>
                                                    <td>
                                                        {{tr.mbnr}}
                                                    </td>

                                                    <td>
                                                        {{tr.fz}}
                                                    </td>
                                                </tr>
                                                <tr class="detail-row open">
                                                    <td colspan="2">
                                                        <div class="table-detail">
                                                            <div class="row">
                                                                <div class="col-xs-12">
                                                                    <p>
                                                                        <span class="label label-xlg label-primary arrowed arrowed-right">包含子项</span>
                                                                        <template v-if="tr.isedit">
                                                                            <button class="btn btn-white btn-success btn-bold" type="button" v-on:click="p_AddTwo(tr)">
                                                                                <i class="ace-icon glyphicon glyphicon-plus bigger-120 orange"></i>
                                                                                新增子项
                                                                            </button>
                                                                        </template>
                                                                    </p>
                                                                    <table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
                                                                        <thead>
                                                                            <tr>
                                                                                <th style="width: 350px">工作计划</th>
                                                                                <th style="width: 150px">工作计划标准</th>
                                                                                <th style="width: 100px">分值</th>
                                                                                <th style="width: 100px">操作</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            <tr v-for="son in tr.MyKaoHeBiaoTwos">
                                                                                <template v-if="son.IsEdit">
                                                                                    <td>
                                                                                        <textarea class="form-control" placeholder="工作计划" style="width: 400px" v-model="son.mbnr"></textarea>
                                                                                    </td>
                                                                                    <td>
                                                                                        <div class="input-group">
                                                                                            @*<input class="form-control input-mask-date" type="text" v-model="son.gzjhkssjstr" v-on:click="inputdatetimeformat($event)" @@focus="inputdatetimeformat($event)" @@keyup="dateformat($event,son)" />*@

                                                                                            <input class="form-control" placeholder="工作计划标准" v-model="son.gzbz" style="width: 150px" />
                                                                                        </div>
                                                                                    </td>
                                                                                    <td>
                                                                                        <template v-if="tr.fz>=0">
                                                                                            <input type="text" style="width: 100px" placeholder="分值" class="col-xs-5" v-model="son.fz" />
                                                                                        </template>

                                                                                    </td>
                                                                                    <td>
                                                                                        <p>
                                                                                            <button class="btn btn-white btn-warning btn-bold btn-sm" type="button" v-on:click="p_DelTwo(tr,son)">
                                                                                                <i class="ace-icon fa fa-trash-o bigger-120 orange"></i>
                                                                                                删除
                                                                                            </button>
                                                                                        </p>
                                                                                    </td>
                                                                                </template>
                                                                                <template v-if="!son.IsEdit">
                                                                                    <td>
                                                                                        {{son.mbnr}}
                                                                                    </td>
                                                                                    <td></td>
                                                                                    <td>
                                                                                        {{son.fz}}

                                                                                    </td>
                                                                                    <td></td>
                                                                                </template>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="clearfix form-actions">
                                    <div class="col-md-offset-1 col-md-11">
                                        <button class="btn btn-white btn-info btn-bold" type="button" v-on:click="p_Save()">
                                            <i class="ace-icon fa fa-floppy-o bigger-120 blue"></i>
                                            保存
                                        </button>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- /section:custom/widget-box -->
            </div>

            <!-- /.span -->
        </div><!-- /.row -->
        <!--弹出框-->
        <div class="row">
            <div class="col-xs-12">
                <div id="dialog-message" class="hide">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" data-rel="tooltip" title="哪个月的工作计划"> 所属时间 </label>
                                    <div class="col-sm-9">
                                        <div class="input-group">
                                            <input class="form-control date-picker" readonly="readonly" type="text" data-date-format="yyyy-mm" id="sssj" />
                                            <span class="input-group-addon">
                                                <i class="fa fa-calendar bigger-110"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- #dialog-message -->
            </div>
        </div>
        @*<div class="input-group">
                <input class="form-control input-mask-date" type="text"/>
            </div>*@
    </div>
</div>
<script src="~/Template/ace_admin_v1.4.0/components/jquery.maskedinput/src/jquery.maskedinput.js"></script>
<script src="~/Scripts/JsModel/Model_KaoHeBiao.js"></script>
<script type="text/javascript">
    //$(document).ready(function () {
    //    $('.input-mask-date').mask('9999/99/99');
    //});

    var vm = new Vue(
        {
            el: "#app",
            data: {
                khblst: [],
                khbinfo: new KaoHeBiao()
            },
            mounted() {

                this.initPage();
            },
            methods: {
                initPage: function () {
                    var _self = this;
                    $('.date-picker').datepicker({
                        language: "zh-CN",
                        autoclose: true,
                        format: "yyyy-mm",
                        minViewMode: 1
                    }).next().on(ace.click_event, function () {
                        $(this).prev().focus();
                    });
                    $('[data-rel=tooltip]').tooltip();
                    _self.p_Gets();
                },
                p_OpenModal: function (e) {
                    var _self = this;
                    e.preventDefault();
                    var dialog = dialog_comm(true,"dialog-message", "创建工作计划", null, function () { _self.p_Create(); }, true);
                },
                ShowInfo: function () {
                    $("#list").hide(function () {
                        $("#info").show();
                    });
                },
                ShowList: function () {
                    $("#info").hide(function () {
                        $("#list").show();
                    });
                },
                p_Edit: function (obj) {
                    var _self = this;
                    _self.p_Get(obj.mkhbid);
                    _self.ShowInfo();
                },
                p_Create: function () {
                    var _self = this;
                    var sssj = $("#sssj").val();
                    axios.get("@Url.Action("CreateMyKaoHeBiao", "MyCaoZuo")", { params: { sssj: sssj } }).then(
                        (response) => {
                            bootbox.alert("创建成功");
                            _self.p_Gets();
                        },
                        (response) => {

                        }
                    ).catch(function(response) {
                        console.log(response);
                    });
                },
                p_Del: function(khbid) {
                    var _self = this;
                    bootbox.confirm("你确定这个操作吗?",
                        function(result) {
                            if (result) {
                                axios.get("@Url.Action("DelMyKaoHeBiao", "MyCaoZuo")", { params: { khbid: khbid } })
                                    .then(
                                        (response) => {
                                            bootbox.alert("删除成功");
                                            _self.p_Gets();
                                        },
                                        (response) => {

                                        }
                                    ).catch(function(response) {
                                        console.log(response);
                                    });
                            }
                        });
                },
                p_Gets: function() {
                    var _self = this;
                    axios.get("@Url.Action("GetMyKaoHeBiaos", "MyCaoZuo")").then((response) => {
                        _self.khblst = [];
                            for (var i = 0; i < response.data.length; i++) {
                                _self.khblst.push(response.data[i]);
                            }
                        },
                        (response) => {

                        }
                    ).catch(function(response) {
                        console.log(response);
                    });
                },
                p_Get: function (khbid) {
                    var _self = this;
                    axios.get("@Url.Action("GetMyKaoHeBiaoInfo", "MyCaoZuo")", { params: { khbid: khbid } }).then((response) => {
                            _self.khbinfo=response.data;
                        },
                        (response) => {

                        }
                    ).catch(function(response) {
                        console.log(response);
                    });
                },
                p_DelTwo: function(pobj,obj) {
                    var _self = this;
                    var index = -1;
                    $(pobj.MyKaoHeBiaoTwos).each(function(i,item) {
                        if (item.mbnr == obj.mbnr) {
                            index = i;
                        }
                    });
                    if (index > -1) {
                        pobj.MyKaoHeBiaoTwos.splice(index, 1);
                    }
                },
                p_AddTwo: function (obj) {
                    obj.MyKaoHeBiaoTwos.push(new MyKaoHeBiaoTwo({ twoid: 0, mbid: 0, mbnr: "", fz: 0, sx: 0, htmlstr: "", zf: 0, gzjhkssj: "", gzjhkssjstr: "", gzbz: "", gzjhwcsj: "", gzjhwcsjstr: "", gzjhwcqk: "", bz: "", MyKaoHeBiaoTwoPingFens: [], IsEdit:true}));
                    //this.inputdatetimeformat();
                },
                p_Save: function() {
                    var _self = this;
                    axios.post('@Url.Action("UpdateMyKaoHeBiao", "MyCaoZuo")', _self.khbinfo).then(
                        (response) => {
                                bootbox.alert("成功",
                                    function (response) {
                                        _self.ShowList();
                                        _self.p_Gets();
                                    });
                        },
                        (response) => {

                        }
                        )
                        .catch(
                        function (error) {
                            bootbox.alert(error);
                            //alert(error);
                        }
                        );
                },
                p_TiJiaoShenHe: function(khbid) {
                    var _self = this;
                    bootbox.confirm("你确定这个操作吗?",
                        function(result) {
                            if (result) {
                                axios.get("@Url.Action("UpdateTiJiaoMyKaoHeBiao", "MyCaoZuo")", { params: { khbid: khbid } }).then((response) => {
                                    if (response) {
                                        if (response.data.error) {
                                            bootbox.alert(response.data.data);
                                        } else {
                                            bootbox.alert("提交成功");
                                            _self.p_Gets();
                                        }
                                    }
                                    },
                                    (response) => {
                                        bootbox.alert("填写有误或分值不合适，请重新核对");
                                    }
                                ).catch(function(response) {
                                    console.log(response);
                                });
                            }
                        });
                },
                inputdatetimeformat: function (event) {
                    var el = event.currentTarget;
                    $(el).mask('9999-99-99');
                },
                dateformat: function (event, obj) {
                    var el = event.currentTarget;
                    var index=-1;
                    index = $(el).val().indexOf("_");
                    if(index==-1) {
                        obj.gzjhkssjstr = $(el).val();
                    }

                }
            }
        });
</script>